<template>
	<up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
		activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>

	<up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
		<up-empty :iconSize="150" mode="order" text="当前暂无运单" v-if="list.length === 0"></up-empty>
		<up-list-item v-for="item in list" :key="item.id">
			<view class="header-huoyuan">
				<view class="huoyuan-all">
					<view class="all-1">
						所属项目：{{ item.projectName }}
					</view>
					<view class="orderId">
						<up-copy :content="item.billId">
							<text>订单号:{{ item.billId }}</text>
						</up-copy>
					</view>
					<view class="orderId">
						<up-copy :content="item.billNo">
							<text>配载单号:{{ item.billNo }}</text>
						</up-copy>
					</view>
					<view class="all-box">
						<view class="all-left">
							<view class="all-2">
								装货时间：{{ item.waybillShipmentStartTime }}
							</view>
							<view class="all-3">
								<view class="left-3">
									<view class="left-3-1">
										<view class="all-3-1">
											装
										</view>
										<view class="all-3-2">
											{{ item.shipperaddress?item.shipperaddress:showAddress(item,'initialAddress') }}
										</view>
									</view>
									<view class="left-3-2">
										<image src="/static/images/icon/juli.png" mode=""></image>
										<view class="left-3-2-2" v-if="item.billMode == 'APPOINT'">
											指派模式
										</view>
										<view class="left-3-2-2" v-if="item.billMode == 'GRAB'">
											抢单模式
										</view>
									</view>
									<view class="left-3-3">
										<view class="all-3-3-1">
											卸
										</view>
										<view class="all-3-3-2">
											{{ item.consigneeaddress?item.consigneeaddress:showAddress(item,'endAddress') }}
										</view>
									</view>
								</view>
								<view class="right-3">
									<view class="right-3-1">
										{{ item.goodsName }}
									</view>
									<view class="right-3-2">
										运输单价
									</view>
									<view class="right-3-3">
										<view class="right-3-3-0">
											￥
										</view>
										<view class="right-3-3-1">
											{{ item.billUnitPrice }}
										</view>
										<view class="right-3-3-2">
											元
										</view>
									</view>
								</view>

							</view>
							<view class="all-4">
								<view class="all-4-1">
									{{ item.goodsCountShow }}
								</view>
								<view class="all-2">
									结束时间：{{ item.waybillShipmentEndTime }}
								</view>
							</view>
						</view>
						<view class="all-right" @click="toComment(item)"
							v-if="item.status === 'AUDIT_SUCCESS' && role === 'driver'">
							<view class="right-text">
								评价
							</view>
						</view>
					</view>
				</view>
			</view>
		</up-list-item>
		<LoadMore :status="status" v-if="list.length !== 0"></LoadMore>
	</up-list>

	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import {
	ref, reactive,
	onMounted
} from "vue"
import {
	useUserStore
} from '@/store'
import {
	storeToRefs
} from "pinia"
import LoadMore from "@/components/LoadMore.vue"
import {
	getDriverTask
} from "@/api/driver.js"
import {
	getCaptainTask
} from "@/api/captain.js"



/* hooks */
const {
	role
} = storeToRefs(useUserStore())


/* 数据 */
const uToastRef = ref(null)
// 运单列表
const list = reactive([])
// 是否还有下一页
const hasNextPage = ref(false)
const status = ref('loadmore')
// 获取列表参数
const getListParams = reactive({
	currPage: 1,
	limit: 10,
	status: 'UPLOAD_RECEIPT'
})
// tab列表
const tabList = reactive([{
	name: '已回单',
	status: 'UPLOAD_RECEIPT',
},
{
	name: '已确认',
	status: 'CONFIRM_RECEIPT'
},
{
	name: '待审核',
	status: 'WAIT_AUDIT'
},
{
	name: '已审核',
	status: 'AUDIT_SUCCESS'
}])




/* 方法 */
// 没有详细地址时显示省市区
const showAddress = (item, str) => {
	let address = JSON.parse(item[str])
	return address.provinceText + address.cityText + address.countyText + (address.text ? address.text : '')
}
// 跳转评价页面
const toComment = (item) => {
	uni.navigateTo({
		url: '/package_mine/pages/waybill/comment?billId=' + item.billId
	})
}
// 点击tab
const clickTab = async (item) => {
	getListParams.currPage = 1
	getListParams.status = item.status
	list.length = 0
	await getList(getListParams)
}
// 触底
const scrolltolower = async () => {
	if (hasNextPage.value) {
		status.value = "loading"
		let params = {
			...getListParams,
			currPage: getListParams.currPage + 1
		}
		await getList(params)
	} else {
		status.value = "nomore"
	}
}
// 获取列表
const getList = async (params) => {
	uToastRef.value.show({
		message: '加载中...',
		type: 'loading',
		duration: -1
	})
	let res = null
	if (role.value === 'captain') {
		res = await getCaptainTask(params)
	} else {
		res = await getDriverTask(params)
	}
	uToastRef.value.hide()
	if (res.success) {
		Object.assign(getListParams, params)
		hasNextPage.value = res.data.hasNextPage
		if (!res.data.hasNextPage) {
			status.value = "nomore"
		} else {
			status.value = "loadmore"
		}
		list.push(...res.data.list)
	}
}
// 初始化封装
const init = async () => {
	await getList(getListParams)
}



/* 钩子 */
onMounted(async () => {
	await init()
})



</script>

<style lang="scss" scoped>
.header-huoyuan {

	background-color: aliceblue;

	.huoyuan-all {
		margin: 0 0 10px 18px;
		padding: 15px 0 5px 0;

		.all-1 {
			font-size: 16px;
			font-weight: 400;
			margin: 0 0 7px 0;
		}

		.all-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 25px;

			.all-left {
				.all-2 {
					color: #999;
				}

				.all-3 {
					display: flex;
					margin-top: 12px;

					.left-3 {
						margin-right: 10px;

						.left-3-1 {
							display: flex;

							.all-3-1 {
								background-color: green;
								color: white;
								border-radius: 50%;
								padding: 4px 7px;
								font-size: 15px;
								margin-right: 18rpx;
								height: 30px;
							}

							.all-3-2 {
								font-size: 15px;
								align-content: center;
							}
						}

						.left-3-2 {
							display: flex;
							margin: 20px 0;

							image {
								width: 20px;
								height: 20px;
								margin-right: 20px;
							}

							.left-3-2-2 {
								align-content: center;
							}
						}

						.left-3-3 {
							display: flex;

							.all-3-3-1 {
								background-color: red;
								color: white;
								border-radius: 50%;
								padding: 4px 7px;
								font-size: 15px;
								margin-right: 18rpx;
								height: 30px;
							}

							.all-3-3-2 {
								font-size: 15px;
								align-content: center;
							}
						}
					}

					.right-3 {
						padding: 5px;

						.right-3-1 {
							color: dodgerblue;
							font-size: 15px;
							margin-bottom: 4px;
						}

						.right-3-2 {
							font-size: 10px;
							color: #999;
							margin-bottom: 4px;
						}

						.right-3-3 {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;

							.right-3-3-0 {
								font-size: 9px;
								color: #999;
							}

							.right-3-3-1 {
								color: red;
								font-size: 18px;
								font-weight: 500;
								margin: 0 5px;
							}

							.right-3-3-2 {
								font-size: 9px;
								color: #999;
							}
						}
					}
				}

				.all-4 {
					display: flex;
					// justify-content: space-between;
					margin-top: 20px;
					align-items: center;

					.all-4-1 {
						color: #999;
						font-size: 12px;
						margin-right: 13px;
					}

					.all-4-2 {
						display: flex;
						color: red;

						.all-4-2-1 {
							align-content: center;

							image {
								width: 15px;
								height: 15px;
								margin-right: 5px;
								line-height: 5px;
							}
						}

						.all-4-2-2 {
							align-content: center;
						}

					}
				}
			}

			.all-right {
				background-color: dodgerblue;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;

				.right-text {
					color: white;
					font-size: 17px;
					text-align: center;
				}
			}
		}

		.orderId {
			color: #999;
			font-size: 16px;
			margin-bottom: 5px;
		}
	}
}
</style>
